<!--! Magic Searchbar -->
<div class="magic-search">
  <div class="search-bar">
    <span class="fi-filter fa fa-search go"></span>
    <span class="search-main-area">
      <span class="radius secondary item"
            ng-repeat="facet in ctrl.currentSearch" ng-cloak="cloak" ng-class="{'server-side-item': facet.isServer}">
        <span data-toggle="tooltip" title="{$ ::strings.serverFacet $}"
           ng-class="{'fa fa-server': facet.isServer}"></span>
        <span data-toggle="tooltip" title="{$ ::strings.clientFacet $}"
           ng-class="{'fa fa-desktop': !facet.isServer}"></span>
        <span class="magic-search-result-title">{$ ::facet.label[0] $}:</span>
        <span class="magic-search-result-string">{$ ::facet.label[1] $}</span>
        <a class="remove" ng-click="ctrl.removeFacet($index, $event)" title="{$ ::strings.remove $}">
          <span class="fi-x fa fa-times"></span>
        </a>
      </span>
      <span class="search-selected" ng-cloak="" ng-show="ctrl.facetSelected">
        {$ ctrl.facetSelected.label[0] $}:
      </span>
      <!-- For bootstrap, the uib-dropdown attribute is moved from input up to div. -->
      <span class="search-entry" uib-dropdown is-open="ctrl.isMenuOpen">
        <input class="search-input" type="text" uib-dropdown-toggle
               placeholder="{$ strings.prompt $}" autocomplete="off" />
        <ul class="facet-drop f-dropdown dropdown-menu" data-dropdown-content=""
            ng-if="ctrl.filteredObj.length > 0">
          <li ng-repeat="facet in ctrl.filteredObj" ng-show="!ctrl.facetSelected">
            <a ng-click="ctrl.facetClicked($index, $event, facet.name)"
               ng-show="!ctrl.isMatchLabel(facet.label)">{$ ::facet.label $}</a>
            <a ng-click="ctrl.facetClicked($index, $event, facet.name)"
               ng-show="ctrl.isMatchLabel(facet.label)">
               {$ ::facet.label[0] $}<span class="match">{$ ::facet.label[1] $}</span>{$ ::facet.label[2] $}
            </a>
          </li>
          <li ng-repeat="option in ctrl.filteredOptions" ng-show="ctrl.facetSelected">
            <a ng-click="ctrl.optionClicked($index, $event, option.key)"
               ng-show="!ctrl.isMatchLabel(option.label)">
               {$ option.label $}
            </a>
            <a ng-click="ctrl.optionClicked($index, $event, option.key)"
               ng-show="ctrl.isMatchLabel(option.label)">
               {$ ::option.label[0] $}<span class="match">{$ ::option.label[1] $}</span>{$ ::option.label[2] $}
            </a>
          </li>
        </ul>
      </span>
    </span>
    <a class="magic-search-clear" ng-click="ctrl.clearSearch()" title="{$ ::strings.cancel $}">
      <span class="fi-x fa fa-times cancel"></span>
    </a>
  </div>
</div>
